<template>
    <div
            class="el-input-tag input-tag-wrapper"
            @click="foucusTagInput">
        <div style="display: flex;">
            <div v-for="(tag, index) in innerTags" :key="index">
                <el-input
                        class="input-new-tag"
                        v-if="editable[index]"
                        v-model="tag.Tag2"
                        :ref="'editableInput' + index"
                        size="small"
                        placeholder="请输入职位"
                        @keyup.enter.native="handleEditableInputConfirm(tag, index)"
                        @change="handleEditableInputConfirm(tag, index)"
                        @blur="handleEditableInputBlur(tag, index)"
                        show-word-limit
                ></el-input>
                <el-tag
                        v-else
                        @click="showEditTagInput(index)"
                        closable
                        :disable-transitions="false"
                        @close="remove(idx,tag.MyPK,tag.Tag2)"
                >{{ tag.Tag2 }}</el-tag
                >
            </div>
            <el-autocomplete
                    v-model.trim="SearchKey"
                    :fetch-suggestions="querySearch"
                    :placeholder="placeholder"
                    style="outline:none;border:none;"
                    @select = "handleSelect"
                    clearable>
            </el-autocomplete>
        </div>
    </div>
</template>

<script>
    import { GetPara } from "@/api/Gener.js";
    export default {
        name: 'ElInputTag',
        props: {

            mapExt:{
                type:Object,
                default: () =>{}
            },

            readOnly: {
                type: Boolean,
                default: false
            },
            placeholder:{
                type:String
            }

        },
        data () {
            return {
                params:{},
                SearchKey: '',
                innerTags: [],
                editable: [],
                dialog_temp: {},
                selectVal:""
            }
        },
        created(){
            this.params=this.$store.getters.getData;
            let str = GetPara(this.mapExt,"SearchTip");
            this.placeholder=str==null || str==undefined||str==""?this.placeholder:str;
            var frmEleDBs = new this.Entities("BP.Sys.FrmEleDBs");
            frmEleDBs.Retrieve("FK_MapData", this.mapExt.FK_MapData, "EleID", this.mapExt.AttrOfOper, "RefPKVal",this.params.WorkID);
            var _this=this;
            this.$.each(frmEleDBs,function(i,item){
                this.selectVal +=item.Tag2+",";
                _this.innerTags.push({
                    MyPK:item.MyPK,
                    Tag1:item.Tag1,
                    Tag2:item.Tag2
                })
            });
            this.tagChange();

        },
        watch: {

        },
        methods: {
            //编辑 职位信息 input显示
            showEditTagInput(index) {
                this.$set(this.editable, index, true);
                this.$nextTick((_) => {
                    var editableInput = "editableInput" + index;
                    this.$refs[editableInput][0].$refs.input.focus();
                });
            },
            //编辑 职位信息 input发生改变
            handleEditableInputConfirm(item, index) {
                if (item.label) {
                    this.$set(this.editable, index, false);
                } else {
                    this.$message({ message: "请输入职位信息", type: "info" });
                }
            },
            //编辑 职位信息 input失去焦点
            handleEditableInputBlur(item, index) {
                this.$set(this.editable, index, false);
            },
            foucusTagInput () {
                if (this.readOnly || !this.$el.querySelector('.tag-input')) {
                    return
                } else {
                    this.$el.querySelector('.tag-input').focus()
                }
            },
            // handleSelect是自己实现的方法
            handleSelect(item) {
                let addSuucess = false
                if (this.addTag(item)) {
                    addSuucess = true
                }
                if (addSuucess) {
                    this.tagChange();
                    this.SearchKey = ''
                }

            },

            addTag (item) {
                if (item && this.selectVal.includes(item.value)==false) {
                    //保存数据
                    var frmEleDB = new this.Entity("BP.Sys.FrmEleDB");
                    frmEleDB.MyPK = this.mapExt.AttrOfOper + "_" + this.params.WorkID + "_" + item.No;
                    frmEleDB.FK_MapData = this.mapExt.FK_MapData;
                    frmEleDB.EleID = this.mapExt.AttrOfOper;
                    frmEleDB.RefPKVal = this.params.WorkID;
                    frmEleDB.Tag1 = item.No;
                    frmEleDB.Tag2 = item.value;
                    frmEleDB.Save();
                    this.innerTags.push({
                        MyPK:frmEleDB.MyPK,
                        Tag1:frmEleDB.Tag1,
                        Tag2:frmEleDB.Tag2
                    });
                    this.selectVal+=frmEleDB.Tag2+",";
                    return true;
                }
                return false;

            },
            remove (index,myPK,name) {
                this.innerTags.splice(index, 1)
                this.selectVal=this.selectVal.replace(name+",","");
                this.tagChange();
                //删除存储的数据
                var frmEleDB = new this.Entity("BP.Sys.FrmEleDB");
                frmEleDB.MyPK = myPK;
                frmEleDB.Delete();

            },
            removeLastTag () {
                if (this.SearchKey) {
                    return
                }
                this.innerTags.pop()
                this.tagChange()
            },
            tagChange () {
                let val="";
                if(this.selectVal.includes(","))
                    val=this.selectVal.substring(0,this.selectVal.length-1)
                this.$emit('input', val);
            },

            // 下面两个方法是autocomplete相关的搜索方法
            querySearch(queryString, cb) {

                let doc = this.mapExt.Doc;
                //替换里面的@符号
                doc = doc.replace(/@Key/g,this.SearchKey);
                let data = this.DBAccess.RunDBSrc(doc,this.mapExt.DBType);
                let results=[];
                data.forEach(item=>{
                    results.push({
                        No:item.No,
                        value:item.Name
                    })
                });
                cb(results);
            },
        }
    }
</script>

<style scoped>
    .input-tag-wrapper {
        position: relative;
        font-size: 14px;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        outline: none;
        padding: 0 10px 0 5px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
    }

    .el-tag {
        margin-right: 4px;
    }

    .tag-input {
        background: transparent;
        border: none!important;
        font-size: 14px;
        height: 40px;
        outline: none;
        padding-left: 0;
        width: 100px;
    }

    .el-input-tag--mini .tag-input{
        height: 28px;
        line-height: 28px;
    }

    .el-input-tag--small .tag-input{
        height: 32px;
        line-height: 32px;
    }

    .el-input-tag--medium .tag-input{
        height: 36px;
        line-height: 36px;
    }

    /* 下面这个的效果是autocomplete的input没有边框*/
    /deep/ .el-autocomplete>.el-input > input {
        /* input { */
        /* background-color: red!important;  调试用的样式 */
        outline:none!important;
        border:none!important;
    }
    /deep/   .inline-box > div {
        margin-right: 5px;
    }
</style>